<template>
  <div class="content">
    <canvas id="c"></canvas>
    <!-- 加载完成后，如果想隐藏进度条可以设置  v-if="loadedData!==100"，也就是loadedData等于100隐藏进度条-->
    <!-- <div v-if="isshow" style="position: absolute;width:400px;" :style="{ left: left + 'px', top: top + 'px' }">
      <el-progress :text-inside="true" :stroke-width="30" :percentage="loadedData"></el-progress>
    </div> -->
  </div>
</template>

<script>
import * as THREE from "three"
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"

export default {
  name: "module",
  data() {
    return {
      renderer: null,
      scene: null,
      camera: null,
      controls: null,
      // loadedData关联加载进度条
      loadedData: 0,
      left: (window.innerWidth - 400) / 2,
      top: (window.innerHeight - 30) / 2,
      isshow: 1
    }
  },
  mounted() {
    this.init()
    this.render()
  },
  methods: {
    init() {
      // 渲染器
      const canvas = document.querySelector('#c')
      // const container = document.createElement('div')
      // document.body.appendChild(container)

      this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas })
      this.renderer.setPixelRatio(window.devicePixelRatio)
      this.renderer.setSize(canvas.clientWidth, canvas.clientHeight)
      this.renderer.toneMapping = THREE.ACESFilmicToneMapping
      this.renderer.toneMappingExposure = 1
      this.renderer.outputEncoding = THREE.sRGBEncoding

      // container.appendChild(this.renderer.domElement)
      // 相机
      this.camera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientHeight, 0.1, 2000)
      this.camera.position.set(184.95493837084203, 145.05411333221153, 190.13306686972422)
      // 场景
      this.scene = new THREE.Scene()

      // 轨道控制
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
      // this.controls.addEventListener( 'change', render ); // use if there is no animation loop
      this.controls.minDistance = 5
      this.controls.maxDistance = 1000
      this.controls.target.set(0, 0, -0.4)
      this.controls.update()

      this.load3D()
    },
    load3D() {
      new RGBELoader().load('textures/equirectangular/royal_esplanade_1k.hdr', (texture) => {
        texture.mapping = THREE.EquirectangularReflectionMapping
        this.scene.background = texture
        this.scene.environment = texture
        this.render()

        const loader = new GLTFLoader()
        // const dracoLoader = new DRACOLoader()
        // dracoLoader.setDecoderPath('/draco/')
        // dracoLoader.preload()
        // loader.setDRACOLoader(dracoLoader)

        loader.load('module/GCY_03.glb', (gltf) => {
          this.scene.add(gltf.scene)
          this.render()
          console.log('渲染完成')
        }, (xhr) => {
          console.log(xhr)
        })
      })
    },
    render() {
      this.renderer.render(this.scene, this.camera)
    }
  }
}
</script>

<style scoped lang="less">
.content {
  width: 100%;
  height: 100vh;
  overflow: hidden;

  #c {
    width: 100%;
    height: 100%;
  }

}
</style>
